<!doctype html>
<html>
<head>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
    <meta charset="UTF-8">
    <title>系统ID:</title>
    {% include 'template/baseCss.volt' %}
    <link rel="stylesheet" href="/css/vendor/cmp-controls.css" type="text/css">
    <link href="/css/cropper.min.css" rel="stylesheet" type="text/css">
    <link href="/css/vendor/add-drone.less" rel="stylesheet/less" type="text/css">
    <script src="/js/less.min.js"></script>

</head>

<body>

<main>
    <div class="info-group">
        <div class="title-bar">
            <label class="server-id">更改系统信息</label>
            {#<div style="float: right;" class="button" onClick="DataProxy.clickBack()">#}
                {#<label class="btn-text">返回</label>#}
                {#<img class="del" src="/images/back.png">#}
            {#</div>#}

            <div style="float: right;" class="button" id="edit-btn" onClick="DataProxy.clickEdit()">
                <label class="btn-text" id="btn-edit">编辑</label>
                <img src="/images/info_edit_edit.png">
            </div>
        </div>

        <div id="info-wrap">
            <table>
                <tr>
                    <th>内部名称:</th>
                    <td><input type="text" disabled="disabled" data-name="system_name">
                        <div class="history button"></div>
                    </td>
                </tr>

                <tr>
                    <th>系统名称:</th>
                    <td><input data-name="system_title" data-edit="true" data-valid="presence" type="text"
                               disabled="disabled">
                        <div class="history button"></div>
                    </td>
                </tr>
                <tr>
                    <th>创建时间:</th>
                    <td><input data-name="created_at" data-edit="false" data-attr="date" data-valid="presence" type="text"
                               disabled="disabled">
                        </input>
                        <div class="history button"></div>
                    </td>
                </tr>


            </table>
            <table>
                <tr>
                    <td colspan="2">
                        <table class="icon-info" cellpadding="0" cellspacing="0">
                            <tr><td>系统图标</td></tr>
                            <tr>
                                <td>
                                    <table class="icon-table" cellpadding="0" cellspacing="0">
                                        <tr>
                                            <td>
                                                <img id="system-icon-0" class="icon-0" src="/images/user-info-modify/user-info-icon.png" alt="用户头像">
                                                <img id="system-icon-upload" class="upload-icon" src="/images/user-info-modify/user-info-icon-upload.png">
                                                <input id="system-icon-upload-input" type="file">
                                            </td>
                                            <td>
                                                <img id="system-icon-1" class="icon-1" src="/images/user-info-modify/user-info-icon.png">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>77x77</td>
                                            <td>26x26</td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr><td class="require">要求: 77X77以上 PNG/JPEG</td></tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <div class="save-btn-wrap">
        <p id="save-btn" class="button" onClick="DataProxy.clickSave()">保 存</p>
    </div>
</main>

</body>
{% include 'template/baseJs.volt' %}
<script src="/js/cropper.min.js"></script>
<script src="/js/vendor/system-info-manager.js"></script>
<script>

    var DataProxy = {
        preKeyData: false,

        init: function(){
            this.requestDetail();
            DataAttrBinder.init();
        },
        requestDetail: function(){
            feimaPost("/subsystem/changeInfo",{
                "action_key": "ACTION_DETAIL",
            },function(result){
                if(result){
                    DataProxy.preKeyData = result.data;
                    if (checkImg(DataProxy.preKeyData["system_logo_url"])){
                        $("#system-icon-0").attr("src", DataProxy.preKeyData["system_logo_url"]+"?"+Math.random());
                        $("#system-icon-1").attr("src", DataProxy.preKeyData["system_logo_url"]+"?"+Math.random());
                    }
                }
            });
        },
        updatePageData: function(){
            if (DataProxy.preKeyData){
                this._updateData(DataProxy.preKeyData, false);
            }
        },
        _updateData: function (data, preStr) {
            for (var item in data) {
                var value = data[item] ? data[item] : "";
                item = preStr ? (preStr + item) : item;
                if (this._bindValue(item, value)) {
                    continue;
                }
            }
        },
        _bindValue: function (item, value) {
            var jSelector = $("[data-name=" + item + "]");
            if (jSelector.is("input")
                || jSelector.is("select")
            ) {
                jSelector.val(value);
                return true;
            }
            if(jSelector.is("textarea")){
                jSelector.text(value);
                jSelector.val(value);
                return true;
            }
            return false;
        },
        clickEdit: function () {

            if (this.editState) {
                FConfirm("您确定放弃编辑吗?", function (result) {
                    if (result) {
                        DataProxy.iconEdit(false);
                        DataProxy._updateButtonState();
                        DataProxy.updatePageData();
                    }
                });
            } else {
                //编辑
                DataProxy.iconEdit(true);
                this._updateButtonState();
            }
        },
        _updateButtonState: function () {
            this.editState = !this.editState;
            $("#btn-edit").text(this.editState ? "取消编辑" : "编辑");
            hCommon.setElementEnable($("[data-edit=true]"), this.editState);
            hCommon.showElement($("#save-btn"), this.editState);
            hCommon.showElement($("#btn-change"), this.editState);

        },
        updatePageData: function () {
            if (DataProxy.preKeyData) {
                this._updateData(DataProxy.preKeyData, false);
            }
        },
        clickBack: function () {
            if (this.editState) {
                FConfirm("您确定放弃编辑吗?", function (result) {
                    if (result) {
                        DataProxy._goBack();
                    }
                });
            } else {
                DataProxy._goBack();
            }
        },
        _goBack: function () {
            var pre = encodeURIComponent(getQueryString("prefilter"));
            var from = getQueryString("from");
            window.location.href = from + "?prefilter=" + pre;
            console.info(his);
        },
        clickSave: function () {

            if (DataValidBinder.valid()) {
                //点击保存
                var param = new Object();
                $("[data-edit=true]").each(function () {
                    var item = $(this);
                    var name = item.attr("data-name");
                    var value = item.val();
                    if (value && value != "") {
                        param[name] = value;
                    }
                });
                param['system_data'] = systemInfoManager.systemIconSrc;
                param['action_key'] = "ACTION_UPDATE";
                feimaPost("/subsystem/changeInfo", param, function (result) {
                    if (result.status == 0){
                        FAlert(result.message, function(){
                            DataProxy._updateButtonState();
                            DataProxy.requestDetail();
                            DataProxy.iconEdit(false);
                        });
                    }
                });
            }
        },
        iconEdit: function(isEditState){
            $("#system-icon-upload").css("display", isEditState ? "block" : "none");
            $("#system-icon-upload-input").css("display", isEditState ? "block" : "none");
        }
    };

    $(function () {
        DataProxy.init();
    });

</script>


</html>